import "./App.css";
import "./appContent";
let flag = false;
const list = [
  { id: 1, name: "xiaowang" },
  { id: 2, name: "xiaowang3" },
  { id: 3, name: "xiaowang333" },
];
const btn = () => {
  flag = !flag;
  console.log("执行点击事件", flag);
};
function App() {
  return (
    <div className="App">
      <header className="App-header">
        <p>react-demo of Mx</p>
      </header>
      <div className="App-main">
        <div className="App-aside">
          <ul>
            <li>item-one</li>
            <li>item-two</li>
            <li>item-three</li>
            <li>item-four</li>
          </ul>
        </div>
        <div className="App-content" id="appContent">
          <h2>列表循环</h2>
          <ul>
            {list.map((item, index) => (
              <li key={item.id}>
                <em>序号：{index + 1}</em> 姓名：{item.name}
              </li>
            ))}
          </ul>
          <div style={{ display: flag ? "block" : "none" }} className="title">
            主题区域
          </div>
          {!flag ? <p>show</p> : null}
          <button onClick={btn}>点击</button>
        </div>
      </div>
    </div>
  );
}

export default App;
